<template>
    <div id='app'>
        <el-container>
            <el-aside style="width: 200px; height: 100%; display: flex; background-color: rgb(48,65,86);">
                <Aside :admin="admin"></Aside>
            </el-aside>
            <el-container>
                <el-header
                        style="display: flex; width: 100%; font-size: 12px; border-bottom: 2px solid rgb(48,65,86); line-height:60px; flex-wrap: nowrap;">
                    <Header :name="userInfo.username"/>
                </el-header>
                <el-main style="height: 100%; width: 100%; display: flex;">
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import Aside from './Aside.vue'
    import Header from './header.vue'

    export default {
        name: "Home",
        components: {
            Aside,
            Header
        },
        data() {
            return {
                userInfo: {
                    userId: '',
                    token: '',
                    username: '',
                    userPhone: '',
                    compId: '',
                    userPriority: '',

                },
                admin: false,
            }
        },
        mounted() {
            this.userInfo = this.$store.state.userAllInfos;

            if (this.userInfo == null) {
                this.$router.push({
                    path: '/login'
                })
            } else {
                if (this.userInfo.userPriority == 1) {
                    this.admin = true
                }
                this.$router.push({
                    path: '/home/view'
                })
            }
        },
        methods: {
        }
    }
</script>

<style lang="scss" scoped>
    #app {
        height: 100%;
        width: 100%;
        display: flex;
    }

</style>
